// 在 ReactKnowledgeDetail.tsx
import React, { Suspense, lazy, useState, useEffect } from "react"
import { useParams } from "react-router-dom"

const ReactKnowledgeDetail: React.FC = () => {
  const { topicId } = useParams<{ topicId: string }>()
  const [Component, setComponent] = useState<React.ComponentType<any> | null>(
    null
  )

  useEffect(() => {
    import("./cssTopics.json").then((data) => {
      const topic = data.topics.find((t) => t.id === topicId)
      if (topic) {
        const LoadedComponent = lazy(() => import(`./lists/${topic.id}.tsx`))
        setComponent(() => LoadedComponent)
      }
    })
  }, [topicId])

  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        {Component ? <Component /> : <p>Topic not found.</p>}
      </Suspense>
    </div>
  )
}

export default ReactKnowledgeDetail
